<template>
  <div class="carousel">
    <div class="carousel-bg">
      <img
        @click="goLivePlay(carouselList[carouselIndex])"
        :src="carouselList[carouselIndex].loopImg"
        :alt="carouselList[carouselIndex].title">
    </div>
    <div class="carousel-content">
      <div
        @mouseover="onChangeCarousel(index)"
        @mouseout="startCarousel"
        @click="goLivePlay(carousel)"
        :key="'carousel'+index"
        v-for="(carousel, index) in carouselList"
        :class="{'active': carouselIndex === index}"
        class="carousel-box">
        <div class="name">{{carousel.schoolName}}</div>
        <div class="info clamp2-ellipsis">{{carousel.title}}</div>
        <div class="date" v-if="!carousel.noDate">{{carousel.openTime | formatDate('MM月DD日 HH:mm:ss')}}</div>
        <div class="date" v-else>直播时间待定</div>
      </div>
    </div>
  </div>
</template>

<script>
// VideoVO {
//   endTime (string, optional): 结束时间 ,
//   explainer (string, optional): 主讲人 ,
//   id (integer, optional): 主键 ,
//   introduce (string, optional): 直播介绍 ,
//   liveNo (string, optional): 直播号 ,
//   logo (string, optional): 图片 ,
//   loopImg (string, optional): 轮播图 ,
//   mdTime (string, optional): 日期 月日 ,
//   openTime (string, optional): 日期 全日期格式 ,
//   schoolId (string, optional): 学校主键 ,
//   schoolName (string, optional): 学校名称 ,
//   startTime (string, optional): 开始时间 ,
//   title (string, optional): 直播标题
// }

export default {
  name: 'Carousel',
  data () {
    return {
      carouselIndex: 0,
      carouselTimer: null,
      carouselList: [{}],
    }
  },
  mounted () {
    this.getCarouselList()
  },
  methods: {
    // 直播跳转检查直播码
    handleVideoClick (id) {
      return this.$http.get('/liveVideoController/clickVideoByUser', { id })
    },
    goLivePlay ({ id, title }) {
      this.handleVideoClick(id).then(value => {
        if (value.status === 501) {
          return
        }
        if (value.status === 2004 || value.status === 2005) {
          this.$router.push({
            path: '/liveDetail',
            query: { id }
          })
          return
        }
        if (value.state === 2) {
          window.open(`#/videoPlay?title=${title}&videoUrl=${value.backUrl}`)
        } else {
          window.open(value.url)
        }
      })
    },
    onChangeCarousel (index) {
      this.carouselIndex = index
      this.stopCarousel()
    },
    getCarouselList () {
      this.$http.get('/liveVideoController/getFistPageWheelVideo').then(value => {
        const noDateList = [11, 12, 15, 13]

        this.carouselList = value.reduce((pre, cur) => {
          cur.noDate = noDateList.includes(cur.id)
          return [...pre, cur]
        }, [])
        this.startCarousel()
      })
    },
    startCarousel () {
      this.carouselTimer = setInterval(() => {
        if (this.carouselIndex === this.carouselList.length - 1) {
          this.carouselIndex = 0
        } else {
          this.carouselIndex++
        }
      }, 2000)
    },
    stopCarousel () {
      clearInterval(this.carouselTimer)
      this.carouselTimer = null
    }
  }
}
</script>

<style scoped lang="less">
  .carousel {
    position: relative;
    height: 500px;

    .carousel-bg {
      position: absolute;
      height: 500px;
      overflow: hidden;
      width: 100%;
      z-index: 1;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .carousel-content {
      box-sizing: border-box;
      width: 508px;
      padding-left: 20px;
      background: rgba(0, 0, 0, .3);
      position: absolute;
      right: 0;
      margin-top: 68px;
      z-index: 2;
    }

    .carousel-box {
      cursor: pointer;
      width: 230px;
      height: 108px;
      color: #fff;
      box-sizing: border-box;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .2);

      &.active {
        color: #FF6B51;
      }

      .name {
        font-size: 22px;
      }

      .info {
        height: 42px;
        padding: 4px 0;
      }

      .date {
        font-size: 12px;
      }
    }
  }
</style>
